<template>
    <el-menu
            default-active="$route.path"
            unique-opened
            class="el-menu-vertical-demo"
            :collapse=isCollapse
            :default-openeds="['/system']">

        <menu-item :menulist="menuList"></menu-item>
    </el-menu>
</template>

<script>
    import MenuItem from "../components/MenuItem"
    import {mapState} from "vuex"
    export default {
        name: "MenuBar",
        components: {
            MenuItem,
        },
        computed:{
            ...mapState({
                menuList: (state)=>{
                    return state.loginstore.menu_data;
                },
                isCollapse: state => state.menustore.isCollapse
            })
        },
        methods: {
            // 展开父级菜单时触发
            // handleOpen(key, keyPath) {
            //     console.log(key, keyPath);
            // },
            // 关闭父级菜单时触发
            // handleClose(key, keyPath) {
            //     console.log(key, keyPath);
            // },
        },
        data() {
            return {

            };
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
        border-right: none;
    }
</style>